<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="120px" style="padding-right: 40px">
            <el-form-item prop="name" label="姓名:">
              <el-input v-model="form.name" placeholder="请输入姓名" maxlength="10"> </el-input>
            </el-form-item>
            <el-form-item prop="account" label="账号:">
              <el-input v-model="form.account" placeholder="请输入账号" maxlength="20"> </el-input>
            </el-form-item>
            <el-form-item prop="phone" label="手机号:">
              <el-input v-model="form.phone" placeholder="请输入手机号"> </el-input>
            </el-form-item>
            <el-form-item label="角色:" prop="rolesIds">
              <el-select v-model="form.rolesIds" multiple placeholder="请选择" style="width: 100%">
                <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门:" prop="dept_id">
              <el-select v-model="form.dept_id" placeholder="请选择" ref="selectTree" style="width: 100%">
                <el-option :value="form.dept_id" :label="form.dept_name" hidden />
                <el-tree :data="deptList" :props="defaultProps" node-key="id" accordion highlight-current @node-click="handleNodeClick" />
              </el-select>
            </el-form-item>
            <el-form-item prop="password" label="密码:" v-if="editModel === 'add'">
              <el-input show-password v-model="form.password" placeholder="请输入密码" maxlength="20"> </el-input>
            </el-form-item>
            <el-form-item prop="password1" label="确认密码:" v-if="editModel === 'add'">
              <el-input show-password v-model="form.password1" placeholder="请再次输入密码" maxlength="20"> </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
              <el-button @click="handleCancel">取消</el-button>
              <el-button :loading="loading" type="primary" @click="handleSubmit">提交</el-button>
              <el-button :loading="loading" type="danger" @click="handleDelete" v-if="editModel === 'edit'">删除</el-button>
              <el-button :loading="loading" type="warning" @click="handleResetPassword" v-if="editModel === 'edit'">重置密码</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUserAdd, apiUserEdit, apiUserDel } from '@/api/assetsPublic'
import { isPassword, isMobile } from '@/utils/validate'

export default {
  name: 'DialogAdd',
  props: {
    editModel: String,
    info: Object,
    roleList: Array,
    deptList: Array,
  },
  data() {
    var validaMobile = (rule, value, callback) => {
      if (value && !isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    var validaPassword = (rule, value, callback) => {
      if (value && !isPassword(value)) {
        callback(new Error('密码6~20位 必须含大写字母、小写字母、数字'))
      } else {
        callback()
      }
    }
    var validaPassword1 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      loading: false,
      form: {
        name: '',
        phone: '',
        password: '',
        password1: '',
        account: '',
        dept_id: [],
        rolesIds: [],
        dept_name: '',
      },
      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validaPassword, trigger: 'blur' },
        ],
        password1: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validaPassword1, trigger: 'blur' },
        ],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validaMobile, trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    if (this.editModel === 'edit' && this.info) {
      for (let key in this.form) {
        if (key !== 'password' && key !== 'password1') {
          this.form[key] = this.info[key]
        }
      }
    }
  },
  destroyed() {},
  methods: {
    // 取消
    handleCancel() {
      this.$emit('close')
    },
    // 提交
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        if (this.editModel === 'add') {
          apiUserAdd(this.form)
            .then((res) => {
              this.loading = false
              this.$message({
                message: '添加成功',
                type: 'success',
              })
              setTimeout(() => {
                this.$emit('success')
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        } else if (this.editModel === 'edit') {
          apiUserEdit({ id: this.info.id, ...this.form })
            .then((res) => {
              this.loading = false
              this.$message({
                message: '编辑成功',
                type: 'success',
              })
              setTimeout(() => {
                this.$emit('success')
              }, 1000)
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    // 删除
    handleDelete() {
      window.enterPreventDefault = false
      this.$confirm('确定要删除这个账号？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          window.enterPreventDefault = true
          this.loading = true
          apiUserDel({ ids: [this.info.id] })
            .then((res) => {
              this.loading = false
              this.$message({
                type: 'success',
                message: '删除成功',
              })
              this.$emit('success')
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch(() => {
          window.enterPreventDefault = true
        })
    },
    // 重置密码
    handleResetPassword() {
      this.$emit('resetPassword')
    },
    // 部门选择
    handleNodeClick(data) {
      this.form.dept_id = data.id
      this.form.dept_name = data.name
      this.$refs.selectTree.blur()
    },
  },
}
</script>

<style>
.el-select-dropdown.el-popper {
  min-height: 200px;
}
</style>
